<template>
    <div class="user">
        <div class="header">
            <div>
                <div class="user_head">
                    <img src="../../assets/img/user/logoWhite.png" alt="">
                </div>
                <p class="user_name" v-if="isLogin">{{person.userName}}
                    <router-link :to="{path:'/user_info'}"><img src="../../assets/img/user/edit.png" alt="">
                    </router-link>
                </p>
                <span @click="login()" class="login_bt" v-if="!isLogin">登陆/注册</span>
            </div>
        </div>
        <div class="order">
            <div class="order_title">我的订单
               <span @click="goOrder('')">查看全部订单></span>
            </div>
            <ul class="horizontal-list clear order_menu">
                <li><img @click="goOrder('0')" src="../../assets/img/user/daifukuan.png" alt="">待付款<span class="small-font" v-if="status.daifukuan">{{status.daifukuan}}</span></li>
                <li><img @click="goOrder('1')" src="../../assets/img/user/daifahuo.png" alt="">待发货<span class="small-font" v-if="status.daifahuo">{{status.daifahuo}}</span></li>
                <li><img @click="goOrder('2')" src="../../assets/img/user/daishouhuo.png" alt="">待收货<span class="small-font" v-if="status.daishouhuo">{{status.daishouhuo}}</span></li>
                 <li><img @click="goOrder('3')" src="../../assets/img/user/daipingjia.png" alt="">待评价</li>
                <li><img @click="goOrder('4,5,7')" src="../../assets/img/user/tuikuan.png" alt="">售后/退款<span class="small-font" v-if="status.shouhou">{{status.shouhou}}</span></li>
            </ul>
        </div>
        <div class="order_lists">
        	<div class="user_module" @click="goCollection()">
           	 	<img src="../../assets/img/user/collection.png" alt="">
           	 	<div>我的收藏</div>
	        </div>
	        <div class="user_module" @click="goDiscount()">
	            <img src="../../assets/img/user/youhuijuan.png" alt="">
	            <div>优惠券 </div>
	        </div>
	        <div class="user_module" @click="changePwd()">
	            <img src="../../assets/img/user/restpsw.png" alt="">
	            <div>修改密码</div>
	        </div>
	        <div class="user_module"  @click="goConection()">
	            <img src="../../assets/img/user/kefu.png" alt="">
	            <div>客服与反馈</div>             
	        </div>
	        <div class="user_module" @click="cleanCookie()">
	            <img src="../../assets/img/user/clear.png" alt="" >
	            <div>清除缓存 </div>
	        </div>
	        <div class="user_module" @click="goAbout()">
	            <img src="../../assets/img/user/about.png" alt="">
	            <div>关于</div>
	        </div>
	        <div class="user_module" @click="goSetting()">
	            <img src="../../assets/img/user/setting.png" alt="">
	            <div>设置 </div>
	        </div>
        </div>
       
        <div class="logout" @click="cleanCookie()" v-if='isLogin'>
            退出登录
        </div>
    </div>
</template>

<style>
    @import url("./user.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                person:{userName:"请完善资料"},
                isLogin:localStorage.getItem('token'),
                status:{
                    daifukuan:0,
                    daifahuo:0,
                    daishouhuo:0,
                    shouhou:0,
                }
            }
        },
        created() {
             window.scrollTo(0,0);
            let token = localStorage.getItem('token');
            if (token) {
              let url = API.serviceDomain + API.personIndex;
              this.$http({method:"get",url:url}).then(
                (res) => {
                  if (res.body.status == '000000') {
                    this.person = res.body.data;
                    if(!this.person.userName){
                      this.person.userName = "请完善资料";
                    }
                  } else {
                    Layer.showMsg(res.body.message);
                  }
                },
                (error) => {
                  Layer.showMsg("服务器开小差了...")
                  return
                }
              )
            this.showship(0)
            this.showship(1)
            this.showship(2)
             this.showship('4,5,7')
            }
        },
        mounted() {
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            cleanCookie(){
                localStorage.removeItem("token");
                Layer.showMsg("清除成功!");
                this.$router.push("/");
            },
            login(){
                this.$router.push({path:'/login',query:{'backUrl':'/user'}})
            },
            goOrder(orderType){
                if(this.isLogin){
                	if(orderType=='3'){
                		Layer.showMsg('敬请期待！');
                	}else{
                		 this.$router.push({path:'order',query:{orderType:orderType}})
                	}
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            goCollection(){
                if(this.isLogin){
                    this.$router.push({path:'cart'})
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            goDiscount(){
            	if(this.isLogin){
                     Layer.showMsg('敬请期待！');
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            changePwd(){
                if(this.isLogin){
                    this.$router.push({path:'change_pwd'})
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            goConection(){
            	if(this.isLogin){
                     Layer.showMsg('敬请期待！');
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            goAbout(){
            	if(this.isLogin){
                     Layer.showMsg('敬请期待！');
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
            goSetting(){
            	if(this.isLogin){
                     Layer.showMsg('敬请期待！');
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/user'}})
                }
            },
                    showship(type){
             let url = API.serviceDomain + API.orderList + "?status="+type;
            this.$http.get(url).then(
                (res) => {
                    if (res.body.status == '000000') {
                        if(res.body.data!=null){
                            if(type==0){
                                this.status.daifukuan=res.body.data.length;
                            }else if(type==1){
                                    this.status.daifahuo=res.body.data.length;
                            }else if(type==2){
                                    this.status. daishouhuo=res.body.data.length;
                            }else if(type=='4,5,7'){
                                let that=this;
                                res.body.data.forEach(function(item){
                                    console.log(item)
                                        if(item.status!='5'){
                                             that.status.shouhou++
                                        }
                                })
                            }else{

                            }
                        }
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    Layer.showMsg("服务器开小差了...")
                    return
                }
            )
             }
        },
    }
</script>
